<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Music Mashup</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/musicplayer-style.css")" type="text/css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css' />

    <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("http://malsup.github.com/jquery.form.js")"></script>
    <script type="text/javascript" src="@Url.Content("http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/musicplayer.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/script.js")"></script>
    
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <div id="container">
        <header>
            <h1 class="h1">Music Mashup</h1> 
        </header>
               
        <div class="span-left">
            <span id="errorMsg" class="ui-state-error" style="display: none"></span>
            <div id="NowPlaying">
                <button id="updateInfo">Update Song Info</button>
                <div id="updateInfoForm" style="display: none">
                    <input type="text" id="updateArtist" />
                    <input type="text" id="updateSongTitle" />
                    <input type="text" id="updateGenre" />
                    <button id="updateInfoSubmit">Submit</button>
                    <p id="updateError" style="display: none" class="ui-state-error">Title can't be empty</p>
                </div><!-- /updateInfoForm -->

                <div id="infoHead">
                    <p id="artist"></p></br>
                    <p id="genre"></p></br>
                </div><!-- /infoHead -->
                           
                <div id="thePlayer"> </div> <!-- this element will host the player!! -->
                <div class="ArtistBio"> 
                    <p id="bio"></p>
                </div><!-- /ArtistBio -->
            </div><!-- /NowPlaying -->

            <div id="LyricsArea">
                <section class="boxHeader"> Lyrics  <a id="showLyrics" class="show-hide">Show</a></section>
                    <div id="SongLyrics">
                        <p id="lyrics"></p>
                    </div><!-- /SongLyrics -->
            </div><!-- /LyricsArea -->
        </div><!-- /span-left -->
          
        <div class="span-right">
            <div id="addArea">
                <section class="boxHeader">Add Songs <a id="showAdd" class="show-hide">Show</a></section>
                <div id="AddSongs">
                    <span id="title">Upload files</span>
                    <form id="uploadForm" action="/api/Playlist" enctype="multipart/form-data" method="post">
                        <input name="data" type="file" multiple="multiple">
                        <input type="submit" />
                    </form>
                    <span id="UploadSuccess" style="display: none">File Uploaded</span>
                </div><!-- /AddSongs -->
            </div><!-- /addArea -->

            <div id="MakeListArea">
                <section class="boxHeader">Make a Playlist <a id="showMakeList" class="show-hide">Show</a></section>
                <div id="makeList">
                    <ul id="playlistOptions" style="display:none;">
                        <li> <button id ="loadPlaylist">Load List</button></li>
                        <li> <button id="clearPlaylist">Clear</button></li>
                    </ul>
                    <ul id="playlistToLoad"></ul>

                    <!--- Template script --->
                    <script id="playlistTemplate" type="text/html">
                        <li>${Artist} - ${Name}</li>
                    </script>
                        
                    <div id="BrowseInfo"style="display: none">
                        <div class="ArtistBio"> 
                            <p id="browseBio"></p>
                        </div><!-- /ArtistBio -->
                        <ul>
                            <li id="browseSong"></li>
                            <li><button id="addToPlaylist">Add to playlist</button></li>
                        </ul>
                        <input type="hidden" id="songToAdd" />
                    </div><!-- /BrowseInfo -->

                    <div id="SearchBar">
                        <span id="searchMsg">'ALL' for all songs</span>
                        <input type="search" id="search" value="SEARCH" />  
                    </div><!-- /SearchBar -->

                    <div id="BrowseList">
                        <span id="noResults" style="display:none;" >No Results</span>
                        <ul id="QueryResults"></ul>
                    </div><!-- /BrowseList -->
                </div><!-- /MakeList  -->
            </div><!-- /MakeListArea  -->
        </div> <!-- /span-right -->
    </div> <!-- /container  -->
    <input type="hidden" id="hidden"/><!-- Contains the current song id -->
</body>
</html>
